<template>
	<view class="cont">
		<view class="cont-body">
			<view class="cont-header">
				<!-- 这里是状态栏 -->
				<view class="status_bar"></view>
				<view class="title">{{navTitle}} 
					<uni-icons class="back" @click="gotoBack()" color="#000000" type="back" size="22" />
					<text class='right' @click="goComplete()">完成</text>
				</view>
			</view>
			
			<view class="from">
				<view class="from-list">
					<view class="from-list-cell">
						<view class="from-lable">
							<text>姓名</text>
						</view>
						<input type="text" value="details.NAME" v-model="name" placeholder="最多四十个字符" />
						<view class="from-icon from-input-clear" @click="name=''">
							<uni-icons color="#949494" class="icon-input-clear" type="clear" size="18" />
						</view>
					</view>
					<view class="from-list-cell">
						<view class="from-lable">
							<text>电话</text>
						</view>
						<view class="from-text">
							<text>{{tel}}</text>
						</view>
					</view>
					<view class="from-list-cell select">
						<view class="from-lable">
							<text>部门</text>
						</view>
						<view class="from-text">
							<!-- <text>宁南县软云软件开发有限公司</text> -->
							<picker @change="bindDeptChange" :value="deptIndex" :range="deptList" range-key="fullname">
								<view class="uni-input">{{deptList[deptIndex].fullname}}</view>
							</picker>
						</view>
						<view class="from-icon">
							<uni-icons color="#CACACA" class="icon-input-compose" type="arrowright" size="18" />
						</view>
					</view>
					<view class="from-list-cell">
						<view class="from-lable">
							<text>备注</text>
						</view>
						<input type="text" v-model="remarks" placeholder="选填" />
					</view>
					<view class="from-list-btn">
						<button type="default">直接删除员工</button>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		components: {
			uniIcons
		},
		data: function () {
	        return {
				navTitle: "编辑员工",
				details: {},
				userid: "",
				tel: "",
				name: "",
				deptid: "",
				remarks: "",
				deptList: [],
				deptIndex: 0,
				subDeptId: 0
	        }
	    },
		onLoad:function(option){
			this.details = JSON.parse(decodeURIComponent(option.details));
			this.tel = this.details.phone,
			this.name = this.details.NAME,
			this.userid = uni.getStorageSync("userid");
			this.deptid = uni.getStorageSync("deptid");
			console.log(this.details)
			this.getDeptList();
		},
		methods:{
			// 完成 编辑员工信息
			goComplete(){
				var that = this;
				
				uni.request({
					url:API.updateUser,
					data:{
						userid: that.userid,
						worker_id: that.details.id,
						tel: that.tel,
						name: that.name,
						deptid:	that.subDeptId,
						remarks: that.remarks
					},
					method:"POST",
					header:API.get_head(),
					success: (res) => {
						console.log("res==>", res);
						
						uni.showToast({
							title:res.data.message,
							icon:"none"
						});
						if(res.data.success){
							that.gotoBack();
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			getDeptList(){
				var that = this;
				
				uni.request({
					url:API.findMySubDept+"?userid="+that.userid,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						console.log("deptres==>", res);
						
						if(res.data.success){
							that.deptList = res.data.data;
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none"
							});
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			bindDeptChange(e){
				this.deptIndex = e.target.value;
				this.subDeptId = this.deptList[this.deptIndex].id;
			},
			gotoBack(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	page{
		height: 100%;
		background-color: #e5e5e5;
	}
	.cont-body{
		padding-bottom: 120upx;
	}
	
	.cont-header{
		width: 100%;
		background-color: #FFFFFF;
	}
	.fixedHeader.cont-header{
		position: fixed;
		top: 0;
		left: 0;
	}
	.cont-header .status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background:#FFFFFF;
	}
	.cont-header .title{
		height:98upx;
		text-align: center;
		font-size:28upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		font-weight: bold;
	}
	.cont-header .title .right{color:#b5b5b5;font-size:30upx;position:absolute;right:30upx;top:0;}
	.cont-header .title .back{position:absolute;left:20upx;top:0;}
	
	
	.from{
		margin-top: 30upx;
	}
	.from-list{
		position: relative;
		background-color: #FFFFFF;
	}
	.from-list:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #EFEFEF;
		position: absolute;
		left: 0;
		top: 0;
	}
	.from-list:nth-child(n+2){
		margin-top: 30upx;
	}
	.from-list-cell{
		height: 100upx;
		line-height: 100upx;
		padding-left: 30upx;
		padding-right: 30upx;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #070B0E;
	}
	.from-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #EFEFEF;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.from-lable{
		width: 200upx;
		line-height: 100upx;
	}
	.from-list-cell input,.from-list-cell .from-text{
		height: 100%;
		line-height: 100upx;
		flex: 1;
	}
	.select .from-text{
		text-align: right;
	}
	.from-list-cell input::-webkit-input-placeholder {  	/* WebKit browsers */
	    color: #8A8A8A;
	}
	.from-list-cell .from-icon{
		width: 40upx;
		line-height: 100upx;
		text-align: right;
	}
	.from-input-clear{
		margin-right: 20upx;
	}
	.from-list-btn button{
		height: 100upx;
		line-height: 100upx;
		border: none;
		outline: none;
		background-color: #FFFFFF;
		font-size: 28upx;
	}
	
	
	
	
</style>
